<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleKeepIntact()">保全登记</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleEdit()">诉讼登记</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <lawsuit-edit
      :visible.sync="editVisible"
      :table-id="editId"
      :query-id="queryId"
      :view-mode="viewMode"
      @success="getData()"
      :edit-mode="editMode"
    ></lawsuit-edit>

    <post-view :visible.sync="viewVisible" :related-id="viewId" tab-name="fristTab">
      <template v-slot:header>
        <el-tab-pane label="诉讼登记表" name="fristTab">
          <main-cmpt
            :edit-mode="[1, 2, 3, 4, 5]"
            :query-id="viewId"
            :table-id="viewTableId"
            view-mode
          ></main-cmpt>
        </el-tab-pane>
      </template>
    </post-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LawsuitEdit from '@/credit/views/city/risk/lawsuit/component/MainDialog'
import PostView from '@/credit/views/city/risk/PostView'
import MainCmpt from '@/credit/views/city/risk/lawsuit/component/Main'

export default {
  components: {
    LawsuitEdit,
    PostView,
    MainCmpt,
  },
  props: {},
  data() {
    return {
      tableName: 'litigation_register_view',
      params: {
        index: 1,
        size: 10,
      },
      tableData: [],
      totalCount: 0,
      order: {},
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '110px' } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },

        {
          attrs: { label: '操作', align: 'center', width: 100 },
          operations: [
            {
              name: '诉讼登记',
              // icon: 'fa fa-edit',
              event: this.handleEdit,
            },
            {
              name: '保全登记',
              event: this.handleKeepIntact,
            },
            {
              name: '判决登记',
              event: this.handleJudg,
            },
            {
              name: '裁定登记',
              event: this.handleRuling,
            },
            {
              name: '结案登记',
              event: this.handleEnd,
            },
            {
              name: '查看',
              event: this.handleView,
            },
          ],
        },
      ],
      loading: false,
      editVisible: false,
      editId: '',
      formData: {},
      queryId: '',
      viewMode: false,
      editMode: [1],

      // 查看
      viewId: '',
      viewTableId: '',
      viewVisible: false,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleView(row = {}) {
      this.viewTableId = row.litigation_register_id || ''
      this.viewId = row.customer_related_id || ''
      this.viewVisible = true
    },
    handleEnd(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.editMode = [5]
      this.editId = row.litigation_register_id || ''
      this.queryId = row.customer_related_id || ''
    },
    handleRuling(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.editMode = [4]
      this.editId = row.litigation_register_id || ''
      this.queryId = row.customer_related_id || ''
    },
    handleJudg(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.editMode = [3]
      this.editId = row.litigation_register_id || ''
      this.queryId = row.customer_related_id || ''
    },
    handleKeepIntact(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.editMode = [2]
      this.editId = row.litigation_register_id || ''
      this.queryId = row.customer_related_id || ''
    },
    handleEdit(row = {}) {
      this.editVisible = true
      this.viewMode = false
      this.editMode = [1]
      this.editId = row.litigation_register_id || ''
      this.queryId = row.customer_related_id || ''
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = data?.data ?? []
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
